<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <script src="../public/cdn/vue/2.6.10/vue.js" charset="utf-8"></script>
        <link rel="stylesheet" href="../public/cdn/element-ui/2.15.6/theme-chalk/index.css">
        <script src="../public/cdn/element-ui/2.15.6/index.js" charset="utf-8"></script>
        <link rel="stylesheet" href="../public/cdn/avue/2.9.5/index.css">
        <script type="text/javascript" src="../public/cdn/avue/2.9.5/avue.min.js"></script>
        <style>
            h1,h3 {
                text-align: center;
                font-family: arial;
                color: #333333;
            }
            .time {
                font-size: 13px;
                color: #999;
            }

            .bottom {
                margin-top: 13px;
                line-height: 12px;
            }

            .button {
                padding: 0;
                float: right;
            }

            .image {
                width: 100%;
                display: block;
            }

            .clearfix:before,
            .clearfix:after {
                display: table;
                content: "";
            }

            .clearfix:after {
                clear: both
            }
        </style>
    </head>

    <body>
        <div id="app">
            <el-container>
                <el-header>
                    <avue-affix  :offset-top="0">
                        <el-row :gutter="20" style="background-color: #fff;">
                            <el-col :span="6">
                                <!-- logo -->
                                <el-image
                                        style="width: 100%; height: 60px"
                                        src="http://www.ahhmhb.com/static/home/images/logo2_2.png"
                                        fit="contain"></el-image>
                            </el-col>
                            <el-col :span="12">
                                <!-- 导航菜单栏 -->
                                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
                                    <el-menu-item index="1">首页</el-menu-item>
                                    <el-submenu index="2">
                                        <template slot="title">新闻资讯</template>
                                        <el-menu-item index="2-1">通知公告</el-menu-item>
                                        <el-menu-item index="2-2">公司动态</el-menu-item>
                                        <el-menu-item index="2-3">行业资讯</el-menu-item>
                                        <el-menu-item index="2-3">党建工作</el-menu-item>
                                        <!--                        <el-submenu index="2-4">-->
                                        <!--                            <template slot="title">选项4</template>-->
                                        <!--                            <el-menu-item index="2-4-1">选项1</el-menu-item>-->
                                        <!--                            <el-menu-item index="2-4-2">选项2</el-menu-item>-->
                                        <!--                            <el-menu-item index="2-4-3">选项3</el-menu-item>-->
                                        <!--                        </el-submenu>-->
                                    </el-submenu>
                                    <el-submenu index="3">
                                        <template slot="title">招贤纳士</template>
                                        <el-menu-item index="2-1">用人理念</el-menu-item>
                                        <el-menu-item index="2-2">招聘岗位</el-menu-item>
                                        <el-menu-item index="2-3">团队风采</el-menu-item>
                                    </el-submenu>
                                    <el-menu-item index="4">联系我们</el-menu-item>
                                </el-menu>
                            </el-col>
                            <el-col :span="6" style="line-height: 60px;">
                                <i class="el-icon-search"></i> 搜索
                            </el-col>
                        </el-row>
                    </avue-affix>
                </el-header>
                <el-main>
                    <el-carousel :interval="4000" type="card" height="600px">
                        <el-carousel-item v-for="item in 6" :key="item">
                            <div style="background-image: url('https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg');
                    background-size: cover; height: 100%; text-align: center;">
                                <h1 style="line-height: 600px;">--------------尿素氮花覅哦哦弄--------------</h1>
                            </div>
                        </el-carousel-item>
                    </el-carousel>

                    <el-divider></el-divider>

                    <el-row>
                        <el-col :span="16">
                            <el-row>
                                <el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">
                                    <el-card :body-style="{ padding: '0px' }" shadow="hover">
                                        <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
                                        <div style="padding: 14px;">
                                            <span>好吃的汉堡</span>
                                            <div class="bottom clearfix">
                                                <time class="time">{{ currentDate }}</time>
                                                <el-button type="text" class="button">操作按钮</el-button>
                                            </div>
                                        </div>
                                    </el-card>
                                </el-col>
                            </el-row>
                        </el-col>
                        <el-col :span="8">
                            <el-card class="box-card">
                                <div slot="header" class="clearfix">
                                    <span>卡片名称</span>
                                    <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
                                </div>
                                <div v-for="item in 4" :key="item" class="text item">{{'列表内容 ' + item }}</div>
                            </el-card>
                        </el-col>
                    </el-row>

                    <el-divider></el-divider>
                    <h1>Business Scope</h1>
                    <h3>业务范围</h3>
                    <el-collapse v-model="activeNames">
                        <el-collapse-item title="一致性 Consistency" name="1">
                            <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
                            <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
                        </el-collapse-item>
                        <el-collapse-item title="反馈 Feedback" name="2">
                            <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
                            <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
                        </el-collapse-item>
                        <el-collapse-item title="效率 Efficiency" name="3">
                            <div>简化流程：设计简洁直观的操作流程；</div>
                            <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
                            <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
                        </el-collapse-item>
                        <el-collapse-item title="可控 Controllability" name="4">
                            <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
                            <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
                        </el-collapse-item>
                    </el-collapse>

                    <el-divider></el-divider>
                    <h1>Project Cases</h1>
                    <h3>项目案例</h3>
                    <el-tabs v-model="activeTabName">
                        <el-tab-pane label="用户管理" name="1">用户管理</el-tab-pane>
                        <el-tab-pane label="配置管理" name="2">配置管理</el-tab-pane>
                        <el-tab-pane label="角色管理" name="3">角色管理</el-tab-pane>
                        <el-tab-pane label="定时任务补偿" name="4">定时任务补偿</el-tab-pane>
                    </el-tabs>

                    <el-divider></el-divider>

                    <h1>News Information</h1>
                    <h3>新闻资讯</h3>
                    <avue-data-card :option="option"></avue-data-card>
                </el-main>
                <el-divider></el-divider>
                <div style="background-color: #3b3b3b">
                    <div style="margin: 0 60px;">
                        <el-image
                                style="height: 60px"
                                src="http://www.ahhmhb.com/static/home/images/logo2_11.png"
                                fit="contain"></el-image>
                        <el-divider></el-divider>
                        <el-row style="line-height: 60px; color: #707070;">
                            <el-col :span="16">CopyRight © 2020 安徽禾美环保集团 皖ICP备13002304号</el-col>
                            <el-col :span="8" style="text-align: right;">技术支持：思讯网络</el-col>
                        </el-row>
                    </div>
                </div>
            </el-container>


            <el-backtop></el-backtop>
        </div>
    </body>
    <script>
        var app = new Vue({
            el: '#app',
            components: {},
            data: {
                activeIndex: "1",
                activeNames: ['1', '2'],
                activeTabName: "1",
                currentDate: new Date(),
                option: {
                    span:8,
                    data: [
                        {
                            click: function (item) {
                                alert(JSON.stringify(item));
                            },
                            name: '小马',
                            src: 'https://v2.avuejs.com/images/card-1.jpg',
                            text: 'xxxxxxxx',
                            href:'https://avuejs.com',
                            target:'_blank'
                        },
                        {
                            click: function (item) {
                                alert(JSON.stringify(item));
                            },
                            name: '网易掌门人',
                            src: 'https://v2.avuejs.com/images/card-3.jpg',
                            text: 'xxxxxx',
                            href:'https://avuejs.com',
                            target:'_blank'
                        },
                        {
                            click: function (item) {
                                alert(JSON.stringify(item));
                            },
                            name: '桐谷和人',
                            src: 'https://v2.avuejs.com/images/card-4.jpg',
                            text: 'xxxxx',
                            href:'https://avuejs.com',
                            target:'_blank'
                        },
                    ]
                },
            },
            watch: {},
            created() {},
            mouted() {},
            computed: {},
            methods: {
            }
        })
    </script>
</html>
